<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="700px"
    append-to-body
  >
    <div class="terms-content" v-loading="loading">
      <div v-if="!loading" v-html="content"></div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('common.close') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  termsType: {
    type: String,
    default: 'privacy',
    validator: (value: string) => ['privacy', 'terms'].includes(value)
  }
});

const emit = defineEmits(['update:modelValue']);
const { t } = useI18n();

// 控制弹窗显示
const dialogVisible = ref(props.modelValue);
const loading = ref(true);
const content = ref('');

// 计算标题
const title = computed(() => {
  return props.termsType === 'privacy' 
    ? t('auth.privacyPolicy') 
    : t('auth.termsOfService');
});

// 监听props.modelValue变化
watch(() => props.modelValue, (newVal) => {
  dialogVisible.value = newVal;
});

// 监听dialogVisible变化
watch(() => dialogVisible.value, (newVal) => {
  emit('update:modelValue', newVal);
});

// 监听termsType变化
watch(() => props.termsType, () => {
  loadContent();
});

// 加载内容
const loadContent = async () => {
  loading.value = true;
  
  try {
    // 这里可以从API获取内容，现在使用模拟数据
    await new Promise(resolve => setTimeout(resolve, 500));
    
    if (props.termsType === 'privacy') {
      content.value = `
        <h2>隐私政策</h2>
        <p>最后更新日期：2023年12月1日</p>
        
        <h3>1. 信息收集</h3>
        <p>我们收集的个人信息类型取决于您如何与我们互动。我们可能收集：</p>
        <ul>
          <li>联系信息（如姓名、电子邮件地址、电话号码）</li>
          <li>账户信息（如用户名和密码）</li>
          <li>交易信息（如购买历史和支付详情）</li>
          <li>技术信息（如IP地址、设备信息和浏览历史）</li>
        </ul>
        
        <h3>2. 信息使用</h3>
        <p>我们使用收集的信息：</p>
        <ul>
          <li>提供、维护和改进我们的服务</li>
          <li>处理交易并发送相关通知</li>
          <li>响应您的请求和提供客户支持</li>
          <li>发送营销和促销信息（如果您已选择接收）</li>
          <li>检测、预防和解决欺诈或安全问题</li>
        </ul>
        
        <h3>3. 信息共享</h3>
        <p>我们可能与以下各方共享您的信息：</p>
        <ul>
          <li>服务提供商（帮助我们提供服务的第三方）</li>
          <li>业务合作伙伴（与我们合作提供产品或服务的公司）</li>
          <li>法律要求（如法院命令或传票）</li>
        </ul>
        
        <h3>4. 数据安全</h3>
        <p>我们实施适当的技术和组织措施来保护您的个人信息免受意外丢失、使用或访问、更改和披露。</p>
        
        <h3>5. 您的权利</h3>
        <p>根据您所在的地区，您可能有权：</p>
        <ul>
          <li>访问您的个人信息</li>
          <li>更正不准确的数据</li>
          <li>删除您的个人信息</li>
          <li>限制或反对处理</li>
          <li>数据可携带性</li>
        </ul>
        
        <h3>6. 联系我们</h3>
        <p>如果您对我们的隐私政策有任何疑问或顾虑，请联系我们：</p>
        <p>电子邮件：privacy@coalmall.com</p>
        <p>电话：400-123-4567</p>
      `;
    } else {
      content.value = `
        <h2>用户协议</h2>
        <p>最后更新日期：2023年12月1日</p>
        
        <h3>1. 接受条款</h3>
        <p>通过访问或使用我们的服务，您同意受本用户协议的约束。如果您不同意这些条款，请不要使用我们的服务。</p>
        
        <h3>2. 账户责任</h3>
        <p>您负责维护您账户的保密性，并对发生在您账户下的所有活动负责。您同意：</p>
        <ul>
          <li>提供准确、最新和完整的信息</li>
          <li>保护您的账户安全，包括密码</li>
          <li>立即通知我们任何未授权使用您账户的情况</li>
        </ul>
        
        <h3>3. 用户行为</h3>
        <p>使用我们的服务时，您同意不会：</p>
        <ul>
          <li>违反任何适用法律或法规</li>
          <li>侵犯他人的知识产权或其他权利</li>
          <li>发布虚假、误导或欺诈性内容</li>
          <li>干扰或破坏服务的正常运行</li>
          <li>尝试未经授权访问我们的系统或其他用户账户</li>
        </ul>
        
        <h3>4. 内容和知识产权</h3>
        <p>我们的服务包含属于我们或第三方的内容，受版权、商标和其他知识产权法保护。您不得未经授权使用、复制或分发此类内容。</p>
        
        <h3>5. 服务变更和终止</h3>
        <p>我们保留随时修改、暂停或终止服务的权利，恕不另行通知。我们也可能因违反这些条款而限制您访问我们的服务。</p>
        
        <h3>6. 免责声明</h3>
        <p>我们的服务按"原样"提供，不提供任何明示或暗示的保证。我们不保证服务将不间断、安全或无错误。</p>
        
        <h3>7. 责任限制</h3>
        <p>在法律允许的最大范围内，我们对因使用或无法使用我们的服务而导致的任何损害不承担责任。</p>
        
        <h3>8. 适用法律</h3>
        <p>本协议受中华人民共和国法律管辖，不考虑法律冲突原则。</p>
      `;
    }
  } catch (error) {
    console.error('Failed to load terms content:', error);
    content.value = '<p>内容加载失败，请稍后重试。</p>';
  } finally {
    loading.value = false;
  }
};

// 初始加载
onMounted(() => {
  loadContent();
});
</script>

<style scoped lang="scss">
.terms-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
  
  :deep(h2) {
    margin-top: 0;
  }
  
  :deep(h3) {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  :deep(p) {
    margin-bottom: 15px;
    line-height: 1.5;
  }
  
  :deep(ul) {
    margin-bottom: 15px;
    padding-left: 20px;
    
    li {
      margin-bottom: 5px;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>